<template>
	<div>
		<!-- 账号信息修改区块 -->
		<div>
			<!-- 漆黑的区块 -->
			<div @click="showUpdataBoxHandler()" v-show="blackPopup | userNameChange | phoneNameChange"
				class="van-overlay" style="z-index: 1999"></div>

			<!-- 用户修改密码 -->

			<div v-show="blackPopup" class="van-popup van-popup--center" style="z-index: 1999">
				<div v-if="Formvalidation02" class="text_password">
					{{$t('accountSettings.tip1')}}!
				</div>
				<div v-else-if="Formvalidation01" class="text_password">
					{{$t('accountSettings.tip2')}}
				</div>


				<div class="accountSettingsDialog">
					<div class="commonDialogSlot_deletBox_1Tm2F">
						<div class="commonDialogSlot_deletIconBox_2ErC-">
							<i @click="showUpdataBoxHandler()"></i>
						</div>
						<div class="commonDialogSlot_content_1izEx">
							<div>
								<div class="accountSettingsDialog_dialogBox__title_3GDa0">
									{{$t('accountSettings.tip3')}}
								</div>
								<div class="accountSettingsDialog_dialogBox-contentBox_3GKhL">
									<div class="accountSettingsDialog_input-box_1E5Or">
										<div class="van-cell van-field">
											<div class="van-cell__value van-cell__value--alone van-field__value">
												<div class="van-field__body">
													<input type="text" placeholder="Enter Current Password"
														class="van-field__control" ref="Update01" />
												</div>
											</div>
										</div>
									</div>
									<div class="accountSettingsDialog_input-box_1E5Or">
										<div class="van-cell van-field">
											<div class="van-cell__value van-cell__value--alone van-field__value">
												<div class="van-field__body">
													<input type="text" placeholder="Enter New Password"
														class="van-field__control" ref="Update02" />
												</div>
											</div>
										</div>
									</div>
									<div class="accountSettingsDialog_input-box_1E5Or">
										<div class="van-cell van-field">
											<div class="van-cell__value van-cell__value--alone van-field__value">
												<div class="van-field__body">
													<input type="text" placeholder="Re-enter New Password"
														class="van-field__control" ref="Update03" />
												</div>
											</div>
										</div>
									</div>
								</div>
								<footer>
									<span @click="VerificationChaneg()"
										class="accountSettingsDialog_footerBtn_3s7jS">{{$t('accountSettings.tip4')}}</span>
								</footer>
							</div>
						</div>
					</div>
				</div>
			</div>

			<!-- 修改用户命名 -->
			<div v-show="userNameChange">
				<div class="van-popup van-popup--center" style="z-index: 2000">
					<div class="accountSettingsDialog">
						<div class="commonDialogSlot_deletBox_1Tm2F" >
							<div class="commonDialogSlot_deletIconBox_2ErC-"><i @click="showUpdataBoxHandler()"></i>
							</div>
							<div class="commonDialogSlot_content_1izEx">
								<div>
									<div class="accountSettingsDialog_dialogBox__title_3GDa0">
										{{$t('accountSettings.tip5')}}
									</div>
									<div class="accountSettingsDialog_dialogBox-contentBox_3GKhL">
										<div class="accountSettingsDialog_input-box_1E5Or">
											<div class="van-cell van-field">
												<div class="van-cell__value van-cell__value--alone van-field__value">
													<div class="van-field__body">
														<input ref="userNameChanegValue" type="text"
															placeholder="New Username" class="van-field__control" />
													</div>
												</div>
											</div>
										</div>
									</div>
									<footer>
										<span class="accountSettingsDialog_footerBtn_3s7jS"
											@click="userNameChangeSubmit()">{{$t('accountSettings.tip4')}}</span>
									</footer>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>

			<van-popup v-model="showPayPal">
				<div class="commonDialogSlot_deletBox_1Tm2F">
					<div class="commonDialogSlot_deletIconBox_2ErC-">
						<i @click="showPayPal = false"></i>
					</div>
					<div class="commonDialogSlot_content_1izEx">
						<span class="payable-title">{{$t('accountSettings.tip6')}}</span>

						<div class="van-cell van-field">
							<div class="van-cell__value van-cell__value--alone van-field__value">
								<div class="van-field__body">
									<input ref="userNameChanegValue" v-model="paypalValue" type="text"
										:placeholder="$i18n.locale == 'en-US' ? 'Enter your PayPal email address' : 'Paypleのメールアドレスを入力してください。' " class="van-field__control" />
								</div>
							</div>
						</div>
						<div class="accountSettingsDialog_footerBtnBox_2uz18">
							<span class=" accountSettingsDialog_footerBtn_3s7jS" @click="setPaypalHandler">{{$t('accountSettings.tip7')}}</span>
							<span style="background-color: #b5b5b7;margin-left: 20px;"
								class=" accountSettingsDialog_footerBtn_3s7jS" @click="showPayPal = false">{{$t('accountSettings.tip8')}}</span>
						</div>
					</div>
				</div>
			</van-popup>
			<!-- 修改号码 -->
			<div v-show="phoneNameChange">
				<div class="van-popup van-popup--center" style="z-index: 2000">
					<div class="accountSettingsDialog">
						<div class="commonDialogSlot_deletBox_1Tm2F" >
							<div class="commonDialogSlot_deletIconBox_2ErC-"><i @click="phoneChanegCancel()"></i></div>
							<div class="commonDialogSlot_content_1izEx">
								<div>
									<div class="accountSettingsDialog_dialogBox__title_3GDa0">
										{{$t('accountSettings.tip9')}}
									</div>
									<div class="accountSettingsDialog_dialogBox-contentBox_3GKhL">
										<div class="accountSettingsDialog_input-box_1E5Or">
											<div class="van-cell van-field">
												<div class="van-cell__value van-cell__value--alone van-field__value">
													<div class="van-field__body">
														<input ref="iphoneNameChanegValue" type="text"
															placeholder="Enter Phone Number"
															class="van-field__control" />
													</div>
												</div>
											</div>
										</div>
									</div>
									<footer>
										<span class="accountSettingsDialog_footerBtn_3s7jS"
											style="background:#ff5900;margin-right:.5rem"
											@click="phoneChanegSubmit()">{{$t('accountSettings.tip7')}}</span>
										<span class="accountSettingsDialog_footerBtn_3s7jS"
											style="background:#b5b5b7;margin-left:.5rem"
											@click="phoneChanegCancel()">{{$t('accountSettings.tip8')}}</span>
									</footer>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>

		<!-- pc端 -->
		<div class="user_profile_pc">
			<div class="overFlow_routerBox">
				<div style="background: #f5f5f5" class="accountSetting">
					<div>
						<p class="accountSettings_pc_title">{{ $t("profile.Account") }}</p>

						<div class="accountSettings_pc_infoBox">
							<p class="accountSettings_pc_infoBox-title">
								{{ $t("profile.Email") }}
							</p>
							<p class="accountSettings_pc_infoBox-text">
								{{ userinfo.email }}
							</p>
							<span class="accountSettings_pc_infoBox-edit"></span>
						</div>

						<div class="accountSettings_pc_infoBox">
							<p class="accountSettings_pc_infoBox-title">
								{{ $t("profile.Password") }}
							</p>
							<p class="accountSettings_pc_infoBox-text">******</p>
							<span class="accountSettings_pc_infoBox-edit"
								@click="showUpdataBoxHandler(1)">{{ $t("profile.Modify") }}</span>
						</div>

						<div class="accountSettings_pc_infoBox">
							<p class="accountSettings_pc_infoBox-title">
								{{ $t("profile.Username") }}
							</p>
							<p class="accountSettings_pc_infoBox-text">
								{{ userinfo.nickname }}
							</p>
							<span class="accountSettings_pc_infoBox-edit"
								@click="showUpdataBoxHandler(2)">{{ $t("profile.Modify") }}</span>
						</div>

						<div class="accountSettings_pc_infoBox">
							<p class="accountSettings_pc_infoBox-title">
								{{ $t("profile.PhoneNumber") }}
							</p>
							<p class="accountSettings_pc_infoBox-text">
								{{ userinfo.phoneNumber }}
							</p>
							<span class="accountSettings_pc_infoBox-edit"
								@click="showUpdataBoxHandler(3)">{{ $t("profile.Modify") }}</span>
						</div>

						<div class="accountSettings_pc_infoBox">
							<p class="accountSettings_pc_infoBox-title">
								{{ $t("profile.AmazonUrl") }}
							</p>
							<p class="accountSettings_pc_infoBox-text">
								https:/mottecommerce.comm
							</p>
							<span class="accountSettings_pc_infoBox-edit"
								@click="showUpdataBoxHandler(4)">{{ $t("profile.Modify") }}</span>
						</div>

						<p class="accountSettings_pc_cashBackText">
							{{ $t("profile.Mottwebsite") }}
						</p>
						<div class="accountSettings_pc_infoBox">
							<p class="accountSettings_pc_infoBox-title">
								{{ $t("profile.Paypal") }}
							</p>
							<p class="accountSettings_pc_infoBox-text">{{userinfo.paypal}}</p>
							<span class="accountSettings_pc_infoBox-edit"
								@click="showUpdataBoxHandler(5)">{{ $t("profile.Modify") }}</span>
						</div>
					</div>
				</div>
			</div>
		</div>

		<!-- 移动端 -->
		<div class="user_profile_iphone">
			<div class="mainPage_mb_content_2ozs2">
				<div class="accountSetting">
					<div class="accountSettings_mb_accountBox_Eqq96">
						<p>{{$t('accountSettings.tip10')}}</p>
						<div>
							<p class="accountSettings_mb_content-title_IWTyE">Email</p>
							<div class="accountSettings_mb_content-input_1EbFa">
								<p class="accountSettings_mb_content-text_3Ejeq" style="color: rgb(137, 137, 137)">
									{{ userinfo.email }}
								</p>
								<!---->
							</div>
						</div>
						<div>
							<p class="accountSettings_mb_content-title_IWTyE">
								{{$t('accountSettings.tip16')}}  
								</p>
							<div class="accountSettings_mb_content-input_1EbFa">
								<p class="accountSettings_mb_content-text_3Ejeq">******</p>
								<span @click="showUpdataBoxHandler(1)"
									class="accountSettings_mb_content-edit_2vCA2">{{$t('accountSettings.tip11')}}</span>
							</div>
						</div>
						<div>
							<p class="accountSettings_mb_content-title_IWTyE">
								{{$t('accountSettings.tip15')}}  
								</p>
							<div class="accountSettings_mb_content-input_1EbFa">
								<p class="accountSettings_mb_content-text_3Ejeq">
									{{ userinfo.username }}
								</p>
								<span @click="showUpdataBoxHandler(2)"
									class="accountSettings_mb_content-edit_2vCA2">{{$t('accountSettings.tip11')}}</span>
							</div>
						</div>
						<div>
							<p class="accountSettings_mb_content-title_IWTyE">
								{{$t('accountSettings.tip14')}}  
								</p>
							<div class="accountSettings_mb_content-input_1EbFa">
								<p class="accountSettings_mb_content-text_3Ejeq">
									{{ userinfo.mobile }}
								</p>
								<span @click="showUpdataBoxHandler(3)"
									class="accountSettings_mb_content-edit_2vCA2">{{$t('accountSettings.tip11')}}</span>
							</div>
						</div>
						<div>
							<p class="accountSettings_mb_content-title_IWTyE">Amazon Url</p>
							<div class="accountSettings_mb_content-input_1EbFa">
								<p class="accountSettings_mb_content-text_3Ejeq">
									https:/mottecommerce.comm
								</p>
								<span class="accountSettings_mb_content-edit_2vCA2">{{$t('accountSettings.tip11')}}</span>
							</div>
						</div>
					</div>

					<div style="background: #f5f5f5" class="accountSettings_mb_paypalBox_3uXTT">
						<div style="background: #fff; margin-top: 1rem; font-size: 0.9rem"
							class="accountSettings_mb_paypalBox-content_3-BuE">
							<p class="accountSettings_mb_content-title_IWTyE" style="font-size: 0.9rem">
								{{$t('accountSettings.tip13')}}  
							</p>
							<div class="accountSettings_mb_content-input_1EbFa">
								<p class="accountSettings_mb_content-text_3Ejeq">{{userinfo.paypal}}</p>
								<span class="accountSettings_mb_content-edit_2vCA2"
									@click="showUpdataBoxHandler(5)">{{$t('accountSettings.tip11')}}</span>
							</div>
						</div>
					</div>
					<div class="accountSettings_mb_historyBox_1eWKn">
						<p class="accountSettings_mb_historyBox-text_1B5J-">
							{{$t('accountSettings.tip12')}}
						</p>
					</div>
				</div>
			</div>
		</div>

	</div>
</template>

<script>
	export default {
		data() {
			return {
				showUpdataBox: false,
				updataType: 0,
				updataUserInfo: {},
				blackPopup: false, //修改密码弹出框
				userNameChange: false, //修改用户名弹出层
				phoneNameChange: false, //修改号码
				Formvalidation01: false, //表单校验弹框
				Formvalidation02: false, //表单校验弹框 
				showPayPal: false, // Paypal验证
				paypalValue: ''
			};
		},
		mounted() {

			this.$refs.userNameChanegValue.value = this.userinfo.nickname
			this.$refs.iphoneNameChanegValue.value = this.userinfo.phoneNumber
			this.paypalValue = this.userinfo.paypal
		},
		methods: {


			getUserInfo() {
				let token = this.$store.state.token
				this.$axios({
					url: '/user/siteUser/info',
					headers: {
						'Authorization': 'Bearer ' + token
					}
				}).then(res => {
					console.log(res)
					this.$store.commit('SET_USERINFO', res.data)
				})
			},

			// 提交密码修改事件
			VerificationChaneg() {
				let text01 = this.$refs.Update01.value.replace(/\s/gi, "");
				let text02 = this.$refs.Update02.value.replace(/\s/gi, "");
				let text03 = this.$refs.Update03.value.replace(/\s/gi, "");

				//  延迟清除定时器
				let isr = false;
				let set01 = null;
				let set02 = null;

				if (isr) {
					clearTimeout(set01);
					clearTimeout(set02);
				} else {
					isr = true;
				}

				if (text02.length >= 6 && text03.length >= 6) {
					if (text02 == text03) {
						console.log("密码一致");
						this.Formvalidation02 = false;
						this.Formvalidation01 = false;

						console.log(text01);
						console.log(text02);
						// 密码一致且大于6位数，发送更改密码请求
						this.$axios({
							url: "user/siteUser/updatePassword",
							method: "put",
							data: {
								oldPassword: text01,
								password: text02,
							},
						}).then((res) => {
							this.$loading();
							// console.log('更改成功')
							console.log(res.data);
							if (res.data) {
								console.log("更改成功");
								this.blackPopup = false;
							} else {
								console.log("更改失败");
							}
						});
					} else {
						this.Formvalidation02 = true;

						set01 = setTimeout(() => {
							this.Formvalidation02 = false;
						}, 3000);
					}
				} else {
					console.log("大于六位");
					this.Formvalidation01 = true;
					set02 = setTimeout(() => {
						this.Formvalidation01 = false;
					}, 3000);
				}
			},

			// 提交用户名修改
			userNameChangeSubmit(res) {
				let userName = this.$refs.userNameChanegValue.value.replace(/\s/gi, "");
				console.log(userName)

				this.$loading();
				this.$axios({
					url: 'user/siteUser/updateNickname',
					method: 'post',
					data: {
						nickname: userName
					}
				}).then(res => {
					this.getUserInfo(this.$store.state.token)
					this.userNameChange = false
				})
			},

			//弹出框的单击事件
			showUpdataBoxHandler(type) {
				switch (type) {
					case 1:
						this.blackPopup = true;
						break;
					case 2:
						this.userNameChange = true
						break;
					case 3:
						this.phoneNameChange = true
						break;
					case 4:
						// mobile
						break;
					case 5:
						// Amazon
						this.showPayPal = true
						break;
					default:
						this.blackPopup = false;
						this.userNameChange = false
						this.phoneNameChange = false
						break;
				}
			},
			setPaypalHandler() {
				this.$uploadFill({
					url: "user/siteUser/updatePaypal",
					method: 'post',
					data: this.$tool.objToFormData({
						paypal: this.paypalValue
					})
				}).then(res => {
					console.log(res)
					if (res.data) {
						this.showToast('updata success', 'データ更新の成功', 'success')
						this.showPayPal = false
						this.getUserInfo()
					}
				})
			},
			// 修改号码
			// 取消弹框
			phoneChanegCancel() {
				this.phoneNameChange = false
			},
			// 提交号码修改
			phoneChanegSubmit() {
				// if(this.$refs.iphoneNameChanegValue.value)
				let iphoneName = this.$refs.iphoneNameChanegValue.value.replace(/\s/gi, "");
				let iphoneNameREG = !(
					/^(?<national>\+?(?:86)?)(?<separator>\s?-?)(?<phone>(?<vender>(13|15|18)[0-9])(?<area>\d{4})(?<id>\d{4}))$/
					.test(iphoneName))
				if (iphoneNameREG) {
					this.showToast('Please enter the correct format of phone number', '正しい電話番号形式を入力してください')
				} else {
					this.$loading();
					this.$axios({
						url: "user/siteUser/updatePhoneNumber",
						method: 'post',
						data: {
							phoneNumber: iphoneName
						}
					}).then(res => {
						this.phoneNameChange = false
						this.getUserInfo(this.$store.state.token)
						console.log(res)
					})
				}
			},

			// 刷新用户信息
			submitUpdataUserInfo(data) {
				this.$axios({
					url: "user?method=set.user.item",
					data,
				}).then((res) => {
					console.log(res);
				});
			},
		},
		computed: {
			userinfo() {
				return this.$store.state.userinfo;
			},
		},
	};
</script>

<style lang="scss" scoped>
	@media only screen and (max-width: 900px) {
		.user_profile_pc {
			display: none;
			overflow: hidden;
		}

		.commonDialogSlot_deletBox_1Tm2F {
			width: 16.8rem;
		}
	}

	@media only screen and (min-width: 900px) {
		.user_profile_iphone {
			display: none;
		}

		.commonDialogSlot_deletBox_1Tm2F {
			width: 540px;
		}

		html {
			font-size: 30px;
		}
	}

	/* pc端样式 */
	.overFlow_routerBox {
		flex: 1;
		margin-left: 20px;
	}

	.accountSetting {
		width: 100%;
		padding: 0;
		margin: 0;
	}

	.accountSettings_pc_title {
		font-size: 30px;
		color: rgb(93, 92, 90);
		padding-left: 32px;
		margin-top: 0px;
		margin-bottom: 0px;
		line-height: 66px;
		font-family: Roboto-Regular;
		background: rgb(255, 255, 255);
		text-align: left;
	}

	.accountSettings_pc_infoBox {
		display: flex;
		background: rgb(255, 255, 255);
		font-size: 14px;
		border-top: 1px solid rgb(239, 239, 239);
		color: rgb(93, 92, 90);
		align-items: center;
		justify-content: center;
		padding: 16px 30px;
	}

	.accountSettings_pc_infoBox-title {
		flex-basis: 300px;
		font-size: 16px;
		text-align: left;
	}

	.accountSettings_pc_infoBox-text {
		flex: 1;
		text-align: center;
	}

	.accountSettings_pc_infoBox-edit {
		flex-basis: 330px;
		text-align: right;
		font-size: 16px;
		color: rgb(255, 89, 0);
		margin-right: 60px;
		cursor: pointer;
	}

	.accountSettings_pc_infoBox:hover {
		background-color: rgb(245, 245, 245);
	}

	.accountSettings_pc_cashBackText {
		padding-top: 15px;
		margin-top: 20px;
		padding-bottom: 15px;
		padding-left: 64px;
		font-size: 14px;
		color: #fff;
		background: #ff5900 url() 35px 50% no-repeat;
		text-align: left;
	}

	.accountSettings_pc_infoBox {
		display: flex;
		background: #fff;
		font-size: 14px;
		border-top: 1px solid #efefef;
		color: #5d5c5a;
		align-items: center;
		justify-content: center;
		padding: 16px 30px;
	}

	.accountSettings_pc_infoBox-title {
		flex-basis: 300px;
		font-size: 16px;
	}

	.accountSettings_pc_infoBox-text {
		flex: 1;
		text-align: center;
	}

	.accountSettings_pc_infoBox-edit {
		flex-basis: 330px;
		text-align: right;
		font-size: 16px;
		color: #ff5900;
		margin-right: 60px;
		cursor: pointer;
	}

	/* 移动端样式 */
	.mainPage_mb_content_2ozs2 {
		background: #f5f5f5;
		padding-bottom: calc(2.15rem + env(safe-area-inset-bottom));
		padding-bottom: calc(2.15rem + constant(safe-area-inset-bottom));
		-webkit-overflow-scrolling: touch;
	}

	.accountSetting {
		background: #f5f5f5;
	}

	.accountSettings_mb_accountBox_Eqq96 {
		color: #ff5900;
		font-size: 0.8755rem;
		padding-left: 0.4rem;
		padding-right: 0.4rem;
		padding-top: 0.55rem;
		padding-bottom: 0.55rem;
		border-bottom: 0.05rem solid #f4f4f3;
		background-color: white;
		text-align: left;
	}

	.accountSettings_mb_content-title_IWTyE {
		padding: 0.5rem;
		font-size: 0.7rem;
		color: #595757;
	}

	.accountSettings_mb_content-input_1EbFa {
		display: flex;
		padding-left: 0.4rem;
		padding-top: 0.5rem;
		padding-bottom: 0.5rem;
		background: #f7f7f7;
		font-size: 0.7005rem;
		color: #595757;
	}

	.accountSetting {
		background: #f5f5f5;
	}

	.accountSettings_mb_content-text_3Ejeq {
		flex: 1;
		text-overflow: ellipsis;
		overflow: hidden;
		width: 80%;
	}

	.accountSettings_mb_content-edit_2vCA2 {
		flex-basis: 3rem;
		padding-left: 0.2rem;
		color: #ff5900;
	}

	.accountSettings_mb_paypalBox_3uXTT {
		margin: 0 0 0.55rem 0;
		background: #fff;
		padding-left: 0.6rem;
		padding-right: 0.6rem;
		padding-bottom: 0.95rem;
	}

	.accountSettings_mb_content-title_IWTyE {
		padding: 0.5rem;
		font-size: 0.7rem;
		color: #595757;
	}

	.accountSettings_mb_content-input_1EbFa {
		display: flex;
		padding-left: 0.4rem;
		padding-top: 0.5rem;
		padding-bottom: 0.5rem;
		background: #f7f7f7;
		font-size: 0.7005rem;
		color: #595757;
	}

	.accountSettings_mb_content-text_3Ejeq {
		flex: 1;
		text-overflow: ellipsis;
		overflow: hidden;
		width: 80%;
	}

	.accountSettings_mb_content-edit_2vCA2 {
		flex-basis: 3rem;
		padding-left: 0.2rem;
		color: #ff5900;
	}

	.accountSettings_mb_content-title_IWTyE {
		padding: 0.5rem;
		font-size: 0.7rem;
		color: #595757;
		text-align: left;
	}

	.accountSettings_mb_historyBox_1eWKn {
		background: #fff;
		margin: 0 0.6rem 1rem;
	}

	.accountSettings_mb_historyBox-text_1B5J- {
		background: #ff5900;
		font-size: 0.6rem;
		color: #fff;
		padding: 0.4rem 1.4rem 0.4rem 2rem;
		text-align: left;
	}

	.van-field {
		padding-left: 0;
		margin-bottom: 0.25rem;
	}

	.van-cell {
		padding: 5px 0;
	}

	.van-cell {
		position: relative;
		display: -webkit-box;
		display: -webkit-flex;
		display: flex;
		box-sizing: border-box;
		width: 100%;
		overflow: hidden;
		color: #323233;
		font-size: 14px;
		line-height: 24px;
		background-color: #fff;
	}

	.accountSettingsDialog_input-box_1E5Or {
		margin-bottom: 0.8rem;
	}

	.van-field {
		border: 1px solid #b5b5b5;
		padding: 0.25rem 0.5rem;
	}

	.van-popup {
		border-radius: 0.3rem;
	}

	.van-popup {
		top: 50%;
		left: 50%;
		-webkit-transform: translate3d(-50%, -50%, 0);
		transform: translate3d(-50%, -50%, 0);
	}

	.van-popup {
		position: fixed;
		max-height: 100%;
		overflow-y: auto;
		background-color: #fff;
		-webkit-transition: -webkit-transform 0.3s ease-out;
		transition: -webkit-transform 0.3s ease-out;
		transition: transform 0.3s ease-out;
		transition: transform 0.3s ease-out, -webkit-transform 0.3s ease-out;
		-webkit-overflow-scrolling: touch;
	}

	.commonDialogSlot_deletIconBox_2ErC- {
		height: 1.8rem;
		background: #ff5900;
		position: relative;
	}


	.payable-title {
		width: 100%;
		display: block;
		text-align: center;
		color: #ffaf52;
		margin-bottom: .8rem;
	}

	.commonDialogSlot_content_1izEx {
		padding: 0.75rem 0.75rem 0.75rem 0.75rem;
		font-size: 0.775rem;
		color: #404040;
		text-align: center;
	}

	.accountSettingsDialog_dialogBox__title_3GDa0 {
		font-size: 0.8rem;
		margin-bottom: 0.7rem;
		margin-top: 0.2rem;
		color: #ffaf52;
	}

	.accountSettingsDialog_dialogBox-contentBox_3GKhL {
		font-size: 0.6rem;
	}

	.accountSettingsDialog_input-box_1E5Or {
		font-size: 0.8rem;
	}

	.van-cell {
		border: 1px solid #b5b5b5;
		padding: 0.25rem 0.5rem;
	}

	.van-field {
		border: 1px solid #b5b5b5;
		padding: 0.25rem 0.5rem;
	}

	.van-field__value {
		color: #323233;
		text-align: left;
	}

	.van-cell__value {
		position: relative;
		overflow: hidden;
		color: #969799;
		text-align: right;
		vertical-align: middle;
		word-wrap: break-word;
	}

	.van-cell__title,
	.van-cell__value {
		-webkit-box-flex: 1;
		-webkit-flex: 1;
		flex: 1;
	}

	.van-field__control {
		display: block;
		box-sizing: border-box;
		width: 100%;
		min-width: 0;
		margin: 0;
		padding: 0;
		color: #323233;
		line-height: inherit;
		text-align: left;
		background-color: transparent;
		border: 0;
		resize: none;
	}

	.van-overlay {
		position: fixed;
		top: 0;
		left: 0;
		z-index: 1;
		width: 100%;
		height: 100%;
		background-color: rgba(0, 0, 0, 0.7);
	}

	.accountSettingsDialog_footerBtn_3s7jS {
		display: inline-block;
		margin: 0 auto;
		width: 6.15rem;
		background-color: #ffaf52;
		height: 1.75rem;
		line-height: 1.75rem;
		color: #fff;
		font-size: 0.7rem;
		margin-top: 1rem;
	}

	.commonDialogSlot_deletIconBox_2ErC>i,
	.commonDialogSlot_deletIconBox_2ErC->i {
		position: absolute;
		width: 1.3rem;
		height: 1.3rem;
		display: block;
		right: 0.35rem;
		top: 50%;
		margin-top: -0.65rem;
		background-color: #fff;
		background: url(https://www.rebatest.com/pingjiayi/App/image/2_03-375.png) 0 0 no-repeat;
		background-size: 1.3rem 1.3rem;
	}

	.text_password {
		position: absolute;
		left: 50%;
		top: 50%;
		transform: translate(-50%, -50%);
		background-color: rgba(0, 0, 0, 0.7);
		padding: 0.5rem;
		color: white;
		z-index: 2000;
		white-space: nowrap;
	}

	.text_password01 {
		position: absolute;
		left: 50%;
		top: 30%;
		transform: translate(-50%, -50%);
		background-color: rgba(0, 0, 0, 0.7);
		padding: 0.5rem;
		color: white;
		z-index: 2000;
		white-space: nowrap;
	}
</style>
